<template>
  <div class="datas">
    <div class="title">
      <i class="iconfont icon-yibiaopan"></i>
      <span>数据监测</span>
      <div class="ops">
        <div class="ops-group">
          <uploder @upload:end="doQuery"><a><i class="iconfont icon-icon_cspace"></i>导入</a></uploder>
        </div>
      </div>
    </div>
    <div class="items">
      <a class="data" :class="{'data-sel':data.sel}" v-for="data in datas" :key="data.id" @click.stop="showChart(data)">
        <div class="-inner">
          <div class="icon">
            <div class="icon-inner">
              <i class="iconfont icon-yibiaopan"></i>
              <span>{{data.gyroName}}</span>
            </div>
          </div>
          <div class="data-ops" @click.stop="doSelect(data)"><i class="el-icon-close"></i></div>
          <div class="infos">
            <div class="times"><span>采集时间： {{data.startTime}} ~ {{data.endTime}}</span></div>
            <div class="times"><span>采集时长： {{data.times}}秒</span><span>数据大小： {{data.total | size}}</span><span>帧数： {{data.frames}}</span>
            </div>
            <div class="ms">
              <span>采集模式 ：{{data.showCjms}}</span>
              <span>采集频率 ：{{data.showCjpl}}</span>
              <span>采集ODR ：{{data.showOdr}}</span>
            </div>
          </div>
        </div>
      </a>
      <div class="none" v-if="datas.length<=0">没有上传过数据！</div>
    </div>
    <data-monitor :visible.sync="monitorDialog.visible" :id="monitorDialog.id"></data-monitor>
  </div>
</template>

<script>
  import DataMonitor from "./monitor";
  import Size from '@/ui/common/mixins/size';
  import Uploder from "./uploder";
  import DatasApi from '@/api/datas';

  export default {
	name: "dataspart",
	components: {Uploder, DataMonitor},
	mixins: [Size],
	data() {
	  return {
		monitorDialog: {
		  visible: false,
		  id: ''
		}
	  }
	},
	props: {
	  datas: {
		type: Array,
		default: () => []
	  }
	},
	methods: {
	  showChart: function (data) {
		this.monitorDialog.id = data.id;
		this.monitorDialog.visible = true;
	  },
	  doQuery: function () {
		this.$emit("datas:refresh", true)
	  },
	  doSelect: function (data) {
		this.$confirm('确定删除数据, 是否继续?', '提示', {
		  confirmButtonText: '确定',
		  cancelButtonText: '取消',
		  type: 'warning'
		}).then(() => {
		  DatasApi.del({id: data.id}).then(res => {
			this.$message({type: 'success', message: '操作成功!'});
			this.$emit("datas:refresh", true)
		  });
		}).catch(() => {
		});
	  }
	}
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @require "../../ui/common/stylus/variable.styl"
  .datas {
    .title {
      display flex;

      i {
        margin-right 15px;
        color $color-success;
      }

      span {
        flex 1;
      }

      .ops {
        display flex;
        font-size 12px;

        a {
          display inline-block;
          border 1px solid $color-border;
          padding 0px 8px;
          margin-left 5px;
          background-color $color-white;
          box-shadow 1px 2px 5px $color-border;
          border-radius 3px;
          cursor pointer;
          transition: all 0.1s ease-out;

          &:hover {
            position relative;
            transform: scale(1.1);
            color $color-success;
          }

          i {
            display none;
          }
        }
      }
    }

    .items {
      min-height 300px;
      margin-left -5px;
      margin-right -5px;

      .data {
        float left;
        width 50%;
        padding 0 5px;
        box-sizing border-box;
        margin-bottom 10px;
        display block;
        cursor pointer;
        position relative;

        .-inner {
          background-color $color-white;
          display flex;
          padding 10px 0;
          box-shadow 1px 2px 5px $color-border;

          &:hover {
            position relative;
            transform: scale(1.03);
          }
        }

        .icon {
          display: flex;
          align-items: center;
          font-size: 32px;
          padding: 0 20px;
          color $color-success;

          .icon-inner {
            i {
              display block;
              text-align center;
            }

            span {
              display block;
              font-size 12px;
              color $color-font;
              margin-top 5px;
            }
          }
        }

        .times {
          font-size 12px;
          margin-bottom 10px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }

        .ms {
          font-size 12px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }

        span {
          margin-right 3px;
        }

        .data-ops {
          position absolute;
          right 10px;
          font-size 20px;
          display none;
        }

        &:hover {
          .data-ops {
            display block;
          }
        }

        &.data-sel {
          .-inner {
            box-shadow: 0rem 0rem 0.10rem #EB6841;
            outline 3px solid #EB6841;
          }
        }
      }

      &:after {
        content "";
        display block;
        clear both;
      }
    }

    .none {
      font-size 16px;
      color $color-light-grey;
      text-align center;
      padding-top 80px;
    }
  }
</style>